<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右分栏布局示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
            overflow: hidden;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 200px;
            background-color: #f0f0f0;
            padding: 20px;
            overflow-y: auto;
        }
        .sidebar ul {
            list-style-type: none;
        }
        .sidebar li {
            margin-bottom: 10px;
        }
        .sidebar a {
            display: block;
            padding: 8px 12px;
            background-color: #e0e0e0;
            text-decoration: none;
            color: #333;
            border-radius: 4px;
        }
        .sidebar a:hover {
            background-color: #d0d0d0;
        }
        .main-content {
            flex: 1;
            border: none;
        }
    </style>
</head>
<body>
<div class="container">

    <div class="sidebar">
        <h3>LCC样例</h3>
        <ul id="item-list">
            <li><a href="#" data-url="https://www.baidu.com" data-param="from=sidebar&source=baidu">百度</a></li>
            <li><a href="#" data-url="https://www.bing.com" data-param="from=sidebar&source=bing">必应</a></li>
            <li><a href="#" data-url="https://www.zhihu.com" data-param="from=sidebar&source=zhihu">知乎</a></li>
        </ul>
    </div>

    <iframe id="contentIFrame"
            class="main-content"
            name="contentFrame"
            src="https://www.baidu.com?from=sidebar&source=baidu"
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
    ></iframe>
</div>
<script>
    function loadPage(){
// 获取所有侧边栏链接
        const links = document.querySelectorAll('.sidebar a');

        // 为每个链接添加点击事件处理
        links.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault(); // 阻止默认行为

                // 获取自定义数据属性
                const targetUrl = this.getAttribute('data-url');
                const params = this.getAttribute('data-param');

                // 构建带参数的完整URL
                const fullUrl = targetUrl + (targetUrl.includes('?') ? '&' : '?') + params;

                // 设置iframe的src
                document.querySelector('.main-content').src = fullUrl;
            });
        });
    }

    loadPage();



    class Finder{
        constructor() {
            // 可选：初始化时检查 DOM 是否可用
            if (typeof document === 'undefined') {
                throw new Error('DOM环境不可用');
            }
        }

        $(id) {
            return document.getElementById(id);
        }

        findItemList(){
            return this.$('item-list');
        }

        createItem(data){
            // 创建 li 元素
            const liElement = document.createElement('li');

            // 创建 a 元素
            const aElement = document.createElement('a');

            // 设置 a 元素的属性
            // aElement.href = '#';
            // aElement.dataset.url = 'https://www.baidu.com';
            // aElement.dataset.param = 'from=sidebar&source=baidu';
            // aElement.textContent = '百度';

            // 将 a 元素添加到 li 元素中
            liElement.appendChild(aElement);

            return liElement;
        }
    }

    function loadPage2(){
        const finder = new Finder();
        const itemList = finder.findItemList();
        console.log(item);
    }

    loadPage2();

</script>
</body>
</html>